<template>
  <div>
    <!-- 搜索 -->
    <el-form
      ref="queryForm"
      :model="queryParams"
      :inline="true"
      label-width="68px"
    >
      <el-form-item label="月份" prop="month">
        <el-input
          id="month"
          v-model="queryParams.month"
          placeholder="请输入月份"
          clearable
          size="small"
        />
      </el-form-item>
      <el-form-item label="年份" prop="year">
        <el-input
          id="year"
          v-model="queryParams.year"
          placeholder="请输入年份"
          clearable
          size="small"
        />
      </el-form-item>
      <el-form-item label="入住时间" prop="inTimeStr">
        <el-date-picker
          v-model="queryParams.inTimeStr"
          type="date"
          placeholder="选择日期"
          value-format="yyyy-MM-ddTHH:mm:ss.SSSZ"
        />
      </el-form-item>

      <el-form-item label="退房时间" prop="outTimeStr">
        <el-date-picker
          v-model="queryParams.outTimeStr"
          type="date"
          placeholder="选择日期"
          value-format="yyyy-MM-ddTHH:mm:ss.SSSZ"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="getData"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="cancel"
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <el-row>
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>产品销量饼状图</span>
          </div>
          <div ref="left" style="height: 400px; margin: 0 auto" />
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>月度销售额柱状图</span>
          </div>
          <div ref="main" style="width: 600px; height: 400px; margin: 0 auto" />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import moment from "moment";
import { barData, pieData } from "@/api/pos/saleData";
export default {
  name: "saleData",
  data() {
    return {
      dataList: [],
      queryParams: {
        month: 0,
        year: 0,
        inTimeStr: null,
        outTimeStr: null,
      },
    };
  },
  created() {},
  mounted() {
    this.initBarChart(barData);
    this.initPieChart(pieData);
  },
  methods: {
    //要根据有什么东西来搜索
    getData() {
      const { month, year, inTimeStr, outTimeStr } = this.queryParams;
      console.log(month, year, inTimeStr, outTimeStr);

      if ((month == 0) & (year == 0) & !inTimeStr && !outTimeStr) {
        this.$message.success("请先填写搜索条件");
      }
      if (inTimeStr && outTimeStr) {
        this.getPieData();
      }
      if (year != "0") {
        this.getBarData();
      }
    },

    getBarData() {
      this.queryParams.month = parseInt(this.queryParams.month);
      console.log(this.queryParams);
      barData(this.queryParams).then((response) => {
        const barData = response.data;
        this.initBarChart(barData);
        console.log(barData);
      });
    },

    getPieData() {
      const intTimeOne = moment(this.queryParams.inTimeStr);
      const inTimeStr = intTimeOne.toDate(); // 将 Moment.js 对象转换为 JavaScript 的 Date 对象
      this.queryParams.inTimeStr = moment(inTimeStr).format("YYYY-MM-DD"); // 再次使用 Moment.js 格式化时间

      const outTimeOne = moment(this.queryParams.outTimeStr);
      const outTimeStr = outTimeOne.toDate();
      this.queryParams.outTimeStr = moment(outTimeStr).format("YYYY-MM-DD");

      this.queryParams.year = parseInt(this.queryParams.year);
      this.queryParams.month = parseInt(this.queryParams.month);
      console.log(this.queryParams);
      pieData(this.queryParams).then((response) => {
        const pieData = response.data;
        this.initPieChart(pieData);
        console.log(pieData);
      });
    },

    //按月份搜索销售额
    initBarChart(barData) {
      var myChart = this.$echarts.init(this.$refs.main);
      var option = {
        // 此处用于存放图形echarts图形option
        xAxis: {
          type: "category",
          data: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: barData,
            type: "bar",
            showBackground: true,
            backgroundStyle: {
              color: "rgba(220, 220, 220, 0.8)",
            },
            barWidth: "20%",
            barGap: "20%",
            barCategoryGap: "40%",
          },
        ],
      };
      option && myChart.setOption(option);
    },

    //按房型搜索销售额
    initPieChart(pieData) {
      var pieChart = this.$echarts.init(this.$refs.left);

      if (pieData && Array.isArray(pieData)) {
        const pieDataArray = pieData.map((item) => ({
          value: item.total,
          name: item.typeName,
        }));
        var option = {
          title: {
            text: "房型分析报表",
            subtext: "按房间类型统计",
            left: "center",
          },
          tooltip: {
            trigger: "item",
          },
          legend: {
            orient: "vertical",
            left: "left",
          },
          series: [
            {
              //name: "占所有产品的",
              type: "pie",
              radius: "50%",
              data: pieDataArray,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: "rgba(0, 0, 0, 0.5)",
                },
              },
            },
          ],
        };
        option && pieChart.setOption(option);
      }
    },

    cancel() {
      (this.queryParams.month = 0),
        (this.queryParams.year = 0),
        (this.queryParams.inTimeStr = ""),
        (this.queryParams.outTimeStr = "");
      this.initBarChart(barData);
      this.initPieChart(pieData);
    },
  },
};
</script>

<style>
</style>